.main-header {
  background-color: $background-color;
  padding: 0.5rem 0;
  transition: all 500ms ease 0ms;

  &.top-nav {
    background-color: transparent;
    box-shadow: none !important;
    padding: 1rem 0;

    .header-navbar {
      .navbar-brand {
        color: rgba(255, 255, 255, .5);
        transition: all 500ms ease 0ms;

        &:hover {
          color: rgba(255, 255, 255, 1);
        }

        .navbar-brand-logo {
          svg {
            g {
              transition: all 500ms ease 0ms;
              fill: rgba(255, 255, 255, 1);
            }
          }
        }
      }

      .navbar-nav {
        .nav-item {
          .nav-link {
            color: rgba(255, 255, 255, .5);
            transition: all 500ms ease 0ms;

            &:hover {
              color: rgba(255, 255, 255, 1);
            }
          }

          &.active {
            .nav-link {
              color: rgba(255, 255, 255, 1);
            }
          }
        }
      }

      .nav-left {
        .btn-search {
          color: rgba(255, 255, 255, .5);
          transition: all 500ms ease 0ms;

          &:hover {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }

  .header-navbar {
    .navbar-brand {
      color: rgba(0, 0, 0, .9);

      .navbar-brand-logo {
        margin-right: 0.25rem;
        height: 1.875rem;

        svg {
          width: 1.875rem;
          height: 1.875rem;
          vertical-align: initial;
        }
      }
    }

    .navbar-nav {
      .nav-item {
        .nav-link {
          color: rgba(0, 0, 0, .5);
          transition: all 500ms ease 0ms;

          &:hover {
            color: rgba(0, 0, 0, .9);
          }
        }

        &.active {
          .nav-link {
            color: rgba(0, 0, 0, .9);
          }
        }
      }
    }

    .nav-left {
      .btn-nav-left {
        background-color: rgba(0, 0, 0, 0);
        border: none;
        color: rgba(0, 0, 0, .5);
        transition: all 500ms ease 0ms;

        &:hover {
          color: rgba(0, 0, 0, .9);
        }

        &:focus {
          box-shadow: none;
        }
      }
    }
  }
}

@mixin dark-mode {
  .main-header {
    background-color: $dark-background-color;
    &.top-nav {
      background-color: transparent;
      .header-navbar {
        .navbar-brand {
          .navbar-brand-logo {
            svg {
              g {
                fill: $dark-main-hover-color;
              }
            }
          }
        }
      }
    }

    .header-navbar {
      .navbar-brand {
        color: rgba(255, 255, 255, .5);
        .navbar-brand-logo {
          svg {
            g {
              fill: $dark-main-color;
            }
          }
        }
      }

      .navbar-nav {
        .nav-item {
          .nav-link {
            color: rgba(255, 255, 255, .5);

            &:hover {
              color: rgba(255, 255, 255, .8);
            }
          }

          &.active {
            .nav-link {
              color: rgba(255, 255, 255, .8);
            }
          }
        }
      }

      .nav-left {
        .btn-search {
          background-color: rgba(0, 0, 0, 0);
          color: rgba(255, 255, 255, .5);

          &:hover {
            color: rgba(255, 255, 255, .8);
          }
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
